*{margin:0;padding:0;}
html, body { position: relative;height: 100%;}
body { background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#fff;
    margin: 0;padding: 0;
  }
  img {position:absolute;} 
.swiper-container {width:6.4rem;height:100%;}
.swiper-slide {text-align:center;font-size:18px;background:#000;display:flex;justify-content:center;align-items:center;}
/* 图片区域start*/
.swiper-slide:nth-child(1){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/1-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
.swiper-slide:nth-child(2){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/bj-2.png')no-repeat 0px 0px;background-size: 100% 100%;
}  
.swiper-slide:nth-child(3){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/page3.jpg')no-repeat 0px 0px;background-size: 100% 100%;
} 
.swiper-slide:nth-child(4){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/bj-4.png')no-repeat 0px 0px;background-size: 100% 100%;
}  
.swiper-slide:nth-child(5){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
} 
.swiper-slide:nth-child(6){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}  
.swiper-slide:nth-child(7){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}  
.swiper-slide:nth-child(8){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}  
.swiper-slide:nth-child(9){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
.swiper-slide:nth-child(10){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
.swiper-slide:nth-child(11){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
.swiper-slide:nth-child(12){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/page11.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
.swiper-slide:nth-child(13){
    width:100%;height:100%;position:relative;overflow: hidden;
    background:url('../img/9-bg.jpg')no-repeat 0px 0px;background-size: 100% 100%;
}
/* top  */
.top{
    width:1.3rem;height:1rem;bottom:0.1rem;left:2.5rem;z-index:10;animation: starttop 1s linear 0.5s infinite;
}
@keyframes starttop{
    0%{transform: translate3D(0,0,0);opacity: 1;}
    20%{transform: translate3D(0,-0.2rem,0);opacity: 0.8;}
    40%{transform: translate3D(0,-0.4rem,0);opacity: 0.6;}
    60%{transform: translate3D(0,-0.8rem,0);opacity: 0.4;}
    80%{transform: translate3D(0,-1rem,0);opacity: 0.2;}
    100%{transform: translate3D(0,-1.2rem,0);opacity: 0.1;}
}
/* top */
/* 第一张小图动画 start */
.img1{ width:4.25rem;height:2rem;top:1.8rem;left:1.2rem;}
.img2{
    width:4.25rem;height:0.5rem;top:4.1rem;left:1.2rem;
}
/* 第一张结束end */

/* 第二张图片 start */
.bj_box{
    position:absolute;width:5.8rem;height:2rem;top:1.5rem;left:0.3rem;box-shadow:0px 0px 25px 5px #fff; 
}
.img3{
    width:5.8rem;height:2rem;left:0rem;
}
.p_box{position:absolute;bottom:0.2rem;width:100%;height:5rem;}
p{position:absolute;}
.p1{
    width:1.6rem;height:0.9rem;background:yellow;text-align:center;color:#000;bottom:2.8rem;left:1.8rem;line-height:0.8rem;
    /* animation: p1 3s linear 4.1s 1; */
}
.p1::after{
    content: "";position:absolute;left:0rem;top:-1rem;
    width:0;height:0;border-top: 0.5rem solid transparent;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid yellow;}
.p1::before{
    content: "";position:absolute;left:0rem;bottom:-1rem;
    width:0;height:0;border-top: 0.5rem solid yellow;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid transparent;}
.p2{
    width:1.6rem;height:0.9rem;background:red;text-align:center;color:#000;bottom:2.8rem;left:3.5rem;line-height:0.8rem;
    /* animation: p2 3s linear 4.3s 1; */
}
.p2::after{
    content: "";position:absolute;left:0rem;top:-1rem;
    width:0;height:0;border-top: 0.5rem solid transparent;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid red;}
.p2::before{
    content: "";position:absolute;left:0rem;bottom:-1rem;
    width:0;height:0;border-top: 0.5rem solid red;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid transparent;}
.p3{
    width:1.6rem;height:0.9rem;background:blue;text-align:center;color:#000;bottom:1.3rem;left:1rem;line-height:0.8rem;
    /* animation: p3 3s linear 4s 1; */
}
.p3::after{
    content: "";position:absolute;left:0rem;top:-1rem;
    width:0;height:0;border-top: 0.5rem solid transparent;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid blue;}
.p3::before{
    content: "";position:absolute;left:0rem;bottom:-1rem;
    width:0;height:0;border-top: 0.5rem solid blue;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid transparent;}
.p4{
    width:1.6rem;height:0.9rem;background:green;text-align:center;color:#000;bottom:1.3rem;left:2.7rem;line-height:0.8rem;
    /* animation: p4 3s linear 4.2s 1; */
}
.p4::after{
    content: "";position:absolute;left:0rem;top:-1rem;
    width:0;height:0;border-top: 0.5rem solid transparent;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid green;}
.p4::before{
    content: "";position:absolute;left:0rem;bottom:-1rem;
    width:0;height:0;border-top: 0.5rem solid green;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid transparent;}
.p5{
    width:1.6rem;height:0.9rem;background:skyblue;text-align:center;color:#000;bottom:1.3rem;left:4.38rem;line-height:0.8rem;
    /* animation: p5 3s linear 4.4s 1; */
}
.p5::after{
    content: "";position:absolute;left:0rem;top:-1rem;
    width:0;height:0;border-top: 0.5rem solid transparent;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid skyblue;}
.p5::before{
    content: "";position:absolute;left:0rem;bottom:-1rem;
    width:0;height:0;border-top: 0.5rem solid skyblue;border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;border-bottom: 0.5rem solid transparent;}

/* @keyframes p1{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@keyframes p2{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@keyframes p3{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@keyframes p4{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@keyframes p5{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
} */
/* 第二张 end */

/* 第四张 start */
.img4{width:5.6rem;height:5.3rem;top:3.5rem;left:0.5rem;}
.p6{width:5.6rem;height:5.3rem;top:1.5rem;left:0.5rem;font-size:0.45rem;}
/* 第四张end */

/* 第五 六 七 八张 start */
.img5{width:6.4rem;height:3rem;top:0rem;}
.img6{width:5rem;height:7.5rem;top:0rem;left:1rem;}
.p7{width:5.5rem;height:2rem;bottom:1rem;text-align:left;font-size: 0.25rem;}
/* 第五  六 七 八张end */

/* 第九张 start */

.img7{width:6.4rem;height:2rem;top:0rem;}
.xy{width:2rem;height:2.5rem;}
.img8{top:2rem;left:1rem;}
.img9{top:2rem;left:3.7rem;}
.img10{top:5rem;left:1rem;}
.img11{top:5rem;left:3.7rem;}
.img12{top:8rem;left:1rem;}
.img13{top:8rem;left:3.7rem;}

/* 第九张end */

/* 第十张 start */
.p8{width:4rem;height:1rem;top:1rem;left:0.5rem;font-size:0.6rem;text-align:left;}
.inner1{width:5.5rem;height:2rem;top:2.6rem;text-align:left;font-size: 0.25rem;}
.quhz{width:6rem;height:2.8rem;top:5.5rem;}
/* 第十张end */

/* 第十一张 start */
.mien1{width:2.8rem;height:1.9rem;top:1.8rem;left:0.4rem;}
.mien2{width:2.8rem;height:1.9rem;top:1.8rem;left:3.3rem;}
.mien3{width:2.8rem;height:1.9rem;top:3.9rem;left:0.4rem;}
.mien4{width:2.8rem;height:1.9rem;top:3.9rem;left:3.3rem;}
.mien5{width:2.8rem;height:1.9rem;top:6rem;left:0.4rem;}
.mien6{width:2.8rem;height:1.9rem;top:6rem;left:3.3rem;}
.mien7{width:2.8rem;height:1.9rem;top:8.1rem;left:0.4rem;}
.mien8{width:2.8rem;height:1.9rem;top:8.1rem;left:3.3rem;}
/* 第十一张 end */

/* 第十二张 start */
.honor1{width:6.4rem;height:0.7rem;top:2rem;}
.honor2{width:6.4rem;height:0.7rem;top:2.7rem;}
.honor3{width:6.4rem;height:0.7rem;top:3.4rem;}
.honor4{width:6.4rem;height:0.7rem;top:4.1rem;}
.honor5{width:6.4rem;height:0.7rem;top:4.8rem;}
.honor6{width:6.4rem;height:0.7rem;top:5.5rem;}
.honor7{width:6.4rem;height:0.7rem;top:6.2rem;}
.honor8{width:6.4rem;height:0.7rem;top:6.9rem;}
.honor9{width:6.4rem;height:0.7rem;top:7.6rem;}
/* 第十二张end */

/* 第十三张 start */
.contact1{width:6.4rem;height:2rem;}
.contact2{width:4.4rem;height:1rem;top:1rem;left:1rem;}
.contact3{width:5.4rem;height:1rem;top:3rem;left:0.5rem;text-align:left;}
.contact4{width:3.4rem;height:1rem;top:4.5rem;left:0.5rem;text-align:left;font-size: 0.2rem;}
.contact5{width:4rem;height:3rem;top:6rem;left:1rem;}
/* 第十三张 end */
